<template>
  <div class="login-panel-account">
    <el-tab-pane name="user_name">
      <!-- Tab-pane 插槽​
          插槽名	说明
          default	Tab-pane 的内容
          label	Tab-pane 的标题内容 -->
      <template #label>
        <div class="label">
          <el-icon><UserFilled /></el-icon>
          <span class="text">账号登录</span>
        </div>
      </template>
      <div>
        <el-form label-width="60" :model="form" size="large" :rules="rules" ref="formRef">
          <!-- prop="user_name" 用于验证 -->
          <el-form-item label="帐号" prop="user_name">
            <el-input v-model="form.user_name" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input show-password v-model="form.password" />
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormRules, ElForm } from 'element-plus'
import { ElMessage } from 'element-plus'
import { loginRequest } from '@/service/login/login.ts'
import useLoginStore from '@/storage/login/login.ts'
import type { LoginInfo } from '@/utils/types.ts'
import { localCache } from '@/utils/cache'

const rules: FormRules = {
  user_name: [
    { required: true, message: '请输入用户名', trigger: 'blur' }, // blur 失去焦点触发验证
    { min: 3, max: 20, message: '长度必须3-5', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^[a-z0-9]{6,20}$/, min: 6, message: '长度必须大于6', trigger: 'blur' },
  ],
}

const form = reactive<LoginInfo>({
  user_name: localCache.getCache('user_name') ?? '',
  password: localCache.getCache('password') ?? '',
})

const formRef = ref<InstanceType<typeof ElForm>>()
// pinal
const loginStorage = useLoginStore()

// 接收传过来的参数 ：？ = 非必填
function LoginAction(isRemPwd: boolean) {
  console.log('=-=isRemPwd', isRemPwd)
  console.log('user_name:', form.user_name)
  console.log('password:', form.password)

  formRef.value?.validate((vaild, field) => {
    if (vaild) {
      console.log('验证成功')

      let user_name = form.user_name
      let password = form.password

      // const formData = new FormData()
      // formData.append('user_name', user_name)
      // formData.append('password', password)

      // 通过pinal 发起请求 并直接保存状态！
      // loginRequest(formData).then((res) => {
      //   console.log("=============")
      //   console.log(res)
      // })

      // 方式二 pinal
      loginStorage.UserLoginAction({ user_name, password }).then((res) => {
        // 判断是否 记住密码
        if (isRemPwd) {
          localCache.setCache('user_name', form.user_name)
          localCache.setCache('password', form.password)
          localCache.setCache('isRemPwd', isRemPwd)
        } else {
          localCache.setCache('isRemPwd', false)
          localCache.removeCache('user_name')
          localCache.removeCache('password')
        }
      })
      console.log('=-=-=-= pinal 登录OK：', isRemPwd)

      console.log('id:', loginStorage.getLoginInfo.id)
      console.log('name:', loginStorage.getLoginInfo.name)
      console.log('token:', loginStorage.getLoginInfo.token)
    } else {
      console.log('---22-')
      console.log('error submit!', field)

      for (const key in field) {
        if (field.hasOwnProperty(key)) {
          const errors = field[key]
          for (const error of errors) {
            const message = error.message
            console.log(message)
            ElMessage.error(message)
          }
        }
      }

      // ElMessage.error(field?.user_name[0].message)
    }
  })
}

// 暴露出子组件的函数
defineExpose({
  LoginAction,
})
</script>

<style scoped></style>
